<template>
  <div id="home">
    <div class="banner">
      <img src="@/assets/images/home/homeBanner.jpg" alt="益辅康">
    </div>
    <div class="body">
      <div class="content">
        <div class="homeTitle">
          <span>PRODUCT INTRODUCTION</span>
          <h3>产品介绍</h3>
        </div>
        <ul class="product">
          <li>
            <img src="@/assets/images/home/product1.jpg" alt="基础款">
            <span class="productName">视觉系-智能机械手【基础款】</span>
          </li>
          <li>
            <img src="@/assets/images/home/product2.jpg" alt="旗舰款">
            <span class="productName">视觉系-智能机械手【旗舰款】</span>
          </li>
          <li>
            <img src="@/assets/images/home/product3.jpg" alt="pro款">
            <span class="productName">视觉系-智能机械手【pro款】</span>
          </li>
          <li>
            <img src="@/assets/images/home/product4.jpg" alt="预售款">
            <span class="productName"> Future未来系-智能康复辅助训练器械【预售设计中】</span>
          </li>
        </ul>
      </div>
      <van-divider />
      <h3>获取假肢个性化装配方案及价格表</h3>
      <form>
        <div class="label">
          称呼
          <span class="iconfont icon-bitian" style="color: #ec6661;"></span>
          <van-tag type="warning" v-if="tagArr[0].bool">请输入</van-tag>
        </div>
        <input type="text" placeholder="请输入您的称呼" v-model="nameText">
        <div class="label">
          电话
          <span class="iconfont icon-bitian" style="color: #ec6661;"></span>
          <van-tag type="warning" v-if="tagArr[1].bool">请输入</van-tag>
        </div>
        <input type="text" placeholder="请输入您的手机号" v-model="phoneText">
        <div class="label">
          是否初次安装假肢
          <span class="iconfont icon-bitian" style="color: #ec6661;"></span>
          <i>单选</i>
          <van-tag type="warning" v-show="tagArr[2].bool">请选择</van-tag>
        </div>
        <ul>
          <li :class="{Choice:singleCheckY}" @click="singleCheckN=false;singleCheckY=true"><span>是</span></li>
          <li :class="{Choice:singleCheckN}" @click="singleCheckY=false;singleCheckN=true"><span>否</span></li>
        </ul>
        <div class="label" style="margin-bottom: 5px;">
          咨询哪种类型的假肢
          <span class="iconfont icon-bitian" style="color: #ec6661;"></span>
          <i>多选</i>
          <van-tag type="warning" v-if="tagArr[3].bool">请选择</van-tag></div>
        <ul>
          <li :class="{Choice:multipleChoiceOne}" @click="multipleChoiceOne=!multipleChoiceOne"><span>基础款</span></li>
          <li :class="{Choice:multipleChoiceTwo}" @click="multipleChoiceTwo=!multipleChoiceTwo"><span>旗舰款</span></li>
          <li :class="{Choice:multipleChoiceThree}" @click="multipleChoiceThree=!multipleChoiceThree"><span>Pro款</span></li>
          <li :class="{Choice:multipleChoiceFour}" @click="multipleChoiceFour=!multipleChoiceFour"><span>预售款</span></li>
        </ul>
        <van-checkbox v-model="agreement" icon-size="14px"  checked-color="#ee0a24">自动输入历史信息<i style="color: #f5224d;">《个人信息授权与隐私政策》</i></van-checkbox>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" :disabled="!agreement" @click="vanButton">立即提交</van-button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homePage',
  data () {
    return {
      nameText: '',
      phoneText: '',
      singleCheckY: false,
      singleCheckN: false,
      multipleChoiceOne: false,
      multipleChoiceTwo: false,
      multipleChoiceThree: false,
      multipleChoiceFour: false,
      agreement: false,
      tagArr: [{ bool: false }, { bool: false }, { bool: false }, { bool: false }],
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null
    }
  },
  methods: {
    vanButton () {
      if (this.nameText === '') {
        this.tagArr[0].bool = true
        clearTimeout(this.timer1)
        this.timer1 = setTimeout(() => {
          this.tagArr[0].bool = false
        }, 1500)
      }
      if (this.phoneText === '') {
        this.tagArr[1].bool = true
        clearTimeout(this.timer2)
        this.timer2 = setTimeout(() => {
          this.tagArr[1].bool = false
        }, 1500)
      }
      if (this.singleCheckY === false && this.singleCheckN === false) {
        this.tagArr[2].bool = true
        clearTimeout(this.timer3)
        this.timer3 = setTimeout(() => {
          this.tagArr[2].bool = false
        }, 1500)
      }
      if (this.multipleChoiceOne === false && this.multipleChoiceTwo === false && this.multipleChoiceThree === false && this.multipleChoiceFour === false) {
        this.tagArr[3].bool = true
        clearTimeout(this.timer4)
        this.timer4 = setTimeout(() => {
          this.tagArr[3].bool = false
        }, 1500)
      }
    }
  }
}
</script>

<style scoped>
.banner {
  height: 150px;
  overflow: hidden;
  border-radius: 5px;
}
.homeTitle span{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 10px;
}
.homeTitle h3{
  text-align: center;
  margin-bottom: 15px;
  font-weight: 700;
  color: #21287f;
  font-size: 20px;
}
.body{
  margin-bottom: 80px;
  font-size: 14px;
}
ul.product{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.product li img{
  width: 167px;
  height: 167px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0,.2);
}
ul.product li{
  margin-bottom: 10px;
  border-radius: 5px;
}
ul.product li .productName{
  width: 167px;
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
}
.body h3{
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: rgba(33, 40, 127,.8);
  margin-bottom: 10px;
}
form{
  font-size: 14px;
}
form div.label{
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}
form div.label i{
  font-size: 12px;
  color: rgba(0, 0, 0,.4);
}
.icon-bitian{
  position: relative;
  top: -3px;
  left: -2px;
}
form input{
  border: 1px solid rgba(0, 0, 0,.6);
  outline: none;
  padding: 8px 7px;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 10px;
}
form ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
form ul li{
  width: 167px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0,.5);
  font-weight: 700;
  border-radius: 5px;
  margin-bottom: 10px;
}
.van-checkbox{
  margin-top: 5px;
  font-size: 12px;
  vertical-align: middle;
}
.van-button{
  border-radius: 22px;
}
.Choice{
  background-color: #fef2f2;
  border: 1px solid #ad4a4a;
  color: #ad4a4a;
}
.van-tag{
  margin-left: 10px;
}
</style>
